Web Design¶

Creating a website that looks and feels good might seem like a monumental task, but making it “not ugly” is easier than you think. Here’s a quick guide on some basic design principles that can help make your site more usable, credible, and engaging, based on this conference talk by Hilary Stohs-Krause.

Why Design Matters¶

A few key reasons why design is crucial:

Usability: Good design informs functionality, guiding users intuitively.
Credibility: Visual design heavily influences credibility. In a Stanford study, nearly half of users attributed a website’s trustworthiness to its appearance.
Interest: We have between 10 seconds to milliseconds to grab someone’s attention. The initial visual impression matters.

1. Making Text Content Readable and Engaging¶

To get visitors to interact with your content, make text easy to read and scan. Here’s how:

a. Line Length and Height¶

Optimal reading speed is achieved around 50-100 characters per line.
Use CSS ch units to define line length by characters instead of pixels.
Increase line height for readability—New York Times uses a 1.5 line height, making large blocks of text less intimidating.

b. Use Padding Wisely¶

Allow space around text to prevent it from crowding the edges or other elements.
Avoid cramming columns too close; otherwise, readers may struggle to know where lines begin and end.

c. Color and Contrast¶

Avoid low-contrast text. Tools like WebAIM’s contrast checker can help you test readability and accessibility.
Start with a default font size of 16px and adjust based on your typeface and audience.

d. Scannability with Subheads and Bullet Points¶

People typically read only about 20-25% of the content on a page, so use subheads, bolded keywords, and bullet points to help them locate important information quickly.
Follow the “First Two Words” rule: begin headings with key info, as users often skim the first two words before deciding to read on.

2. Using Images and Icons Effectively¶

Images and icons can enhance or harm your design. Here’s how to get it right:

a. Icons Should Have Labels¶

Icons without text often confuse users, as many icons lack universal meanings.
Labeling improves understanding—studies show that labeled icons are accurately recognized 88% of the time.

b. Integrate Images into Content¶

Avoid placing images in traditional ad areas, which people often ignore (known as “banner blindness”).
Make sure images relate directly to content; users notice plain text and faces before other types of visuals.

3. Logical, Pattern-Based Layout¶

A logical design that follows predictable patterns minimizes user frustration. Here are a few guidelines:

a. Keep Patterns Simple¶

Users are more likely to stay on a website with predictable layouts. Stick to consistent formatting for columns and rows.
An alternating layout (e.g., two columns, three columns, one wide row) keeps the page interesting without overwhelming.

b. Follow the F-Shape Reading Pattern¶

Users naturally read in an F or E shape, focusing most attention on the top left. Place your essential content there for maximum engagement.
Don’t cram everything at the top—leave white space so users can focus on key areas without feeling bombarded.

c. Use Consistency for Predictability¶

Buttons, links, and forms should follow the same visual patterns throughout your site.
Consistent visuals build user trust, allowing them to focus on the content instead of wondering about navigation.

4. Functionality and Design Go Hand-in-Hand¶

Design isn’t only about visuals; it’s about functionality, too.

Limit Bugs: Smooth functionality is as essential as aesthetics. The design should aid the user experience by providing error-free interactions.
Design Thinking: Consider functionality from the back-end as well, especially when creating interactive features like tables or filters.

Final Takeaways¶

Design doesn’t have to be complex. A few thoughtful choices can help your site go from “ugly” to “not ugly,” and make it far more user-friendly:

Readable text with proper line length, height, and contrast.
Appropriate use of icons and images, adding value rather than clutter.
Logical layout patterns that follow user expectations and F-shape reading.
Functional consistency, ensuring that everything from forms to buttons works as expected.